import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import Events from '../../utils/events'

import './style.less'

@connect(((state) => state))
class NumKeyboard extends Component {
  constructor(props) {
    super(props);
    this.state={ input: '' }
    Events.on('over', () => {
      console.log('停止计时器')
      clearInterval(this.timer)
    })
  }
  onInput = (e) => {
    const { onNext, index } = this.props;
    const { key } = e.target.dataset;
    let { input } = this.state;
    if (key === 'del') {
      input = input.slice(0, input.length - 1)
    } else if (key === 'next') {
      if (input) {
        onNext(parseFloat(input));
        this.setState({ input: '' });
        return;
      }
    } else {
      let reg = /^\d+.?\d*$/g
      if (input[0] === '0' && key === '0') {
        return;
      }
      if(!reg.test(input + key)) {
        return;
      }
      input += key
    }
    // 接近答案直接跳过
    // if (parseInt(input) === parseInt(index.result)) {
    //   onNext(parseFloat(input));
    //   this.setState({ input: '' });
    //   return;
    // }
    this.setState({
      input: input
    })
  }
  test = () => {
    const { index, onNext } = this.props
    if (index && onNext) {
      onNext(index.result)
    }
  }
  doTest = () => {
    clearInterval(this.timer)
    this.timer = setInterval(() => {
      this.test();
    }, 1000 * 0.05)
  }
  render() {
    const { index, client } = this.props
    const { input } = this.state

    return (
      <View className='keyboard-content' >
        <View className='formula' >
          <View className='col' >{index.y}</View>
          <View className='col' >{client.method.type}</View>
          <View className='col' >{index.x}</View>
          <View className='col' >=</View>
          <View className='col' >{input}</View>
        </View>
        <View className='keyboard' >
          <View className='col' style={{ flex: 3 }} >
            <View className='row' >
              <View className='col btn' onClick={this.onInput} data-key='7' >7</View>
              <View className='col btn' onClick={this.onInput} data-key='8' >8</View>
              <View className='col btn' onClick={this.onInput} data-key='9' >9</View>
            </View>
            <View className='row' >
              <View className='col btn' onClick={this.onInput} data-key='4' >4</View>
              <View className='col btn' onClick={this.onInput} data-key='5' >5</View>
              <View className='col btn' onClick={this.onInput} data-key='6' >6</View>
            </View>
            <View className='row' >
              <View className='col btn' onClick={this.onInput} data-key='1' >1</View>
              <View className='col btn' onClick={this.onInput} data-key='2' >2</View>
              <View className='col btn' onClick={this.onInput} data-key='3' >3</View>
            </View>
            <View className='row' >
              <View className='col btn' style={{ flex: 2 }} onClick={this.onInput} data-key='0'>0</View>
              <View className='col btn' style={{ flex: 1 }} onClick={this.onInput} data-key='.'>.</View>
            </View>
          </View>
          <View className='col' style={{ flex: 1 }}  >
            <View className='btn row' onClick={this.onInput} data-key='del' >删除</View>
            <View className='btn row' onClick={this.onInput} data-key='next'>下一题</View>
            {/* <View className='btn row' onClick={this.doTest} data-key='next'>下一题</View> */}
          </View>
        </View>
      </View>
    )
  }
}

export default NumKeyboard;
